<template>
  <div class="channelConfig">
    <tabs
      :tabPane="tabPaneList"
      @tab-click="handleClick"
      v-model="activeName"
      :oprateArr="handleOprateArr">
    </tabs>
    <component :is="activeName" :ref='activeName' @handle-oprate="handleOprate"></component>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import tabs from '@/components/configCommon/configTabs.vue'
import { isHasFuncOrMenus } from '@/utils/common'
import satisfaction from '@/views/config/webchat/globalSetting/satisfaction/index.vue'
import agentStatus from '@/views/config/webchat/globalSetting/agentStatus/index.vue'
import customMessage from '@/views/config/webchat/globalSetting/customMessage/index.vue'
import webchatLabel from '@/views/config/webchat/globalSetting/webchatLabel/index.vue'
import otherSetting from '@/views/config/webchat/globalSetting/otherSetting/index.vue'
import blackList from './blackList/index.vue'
import vocabularySet from './vocabularySet/index.vue'
@Component({
  name: 'webchatGlobalSetting',
  components: {
    tabs,
    satisfaction,
    agentStatus,
    customMessage,
    webchatLabel,
    otherSetting,
    blackList,
    vocabularySet
  }
})
export default class WebchatGlobalSetting extends Vue {
  private $store: any
  private activeName = 'satisfaction'

  private limit: any = []

  private handleOprateArr = []

  private tabPaneList: any = [
    { label: '满意度设置', name: 'satisfaction', _id: 'satisfaction_config' },
    { label: '自定义座席状态', name: 'agentStatus', _id: 'custom_agent_status' },
    { label: '自定义消息设置', name: 'customMessage', _id: 'custom_messge_setting' },
    { label: '会话标签', name: 'webchatLabel', _id: 'im_session_tag_setting' },
    { label: '其他设置', name: 'otherSetting', _id: 'other_setting' },
    { label: '黑名单', name: 'blackList', _id: 'black_list' },
    { label: '词汇设置', name: 'vocabularySet', _id: 'words_setting' }
  ]

  private handleClick (item: any) {
    this.$set(this, 'handleOprateArr', [])
  }

  private handleOprate (list: any) {
    this.$set(this, 'handleOprateArr', list || [])
  }

  private mounted () {
    // 权限处理
    const arr = ['satisfaction_config', 'custom_agent_status', 'custom_messge_setting', 'im_session_tag_setting', 'black_list', 'words_setting'] //  满意度 自定义消息
    const newArr: any[] = ['other_setting']
    arr.forEach((item: string) => {
      if (isHasFuncOrMenus(item, this.$store.state.common.session.user, true)) {
        newArr.push(item)
      }
    })
    console.log(newArr)
    this.tabPaneList = this.tabPaneList.filter(item => newArr.indexOf(item._id) > -1)
    this.activeName = this.tabPaneList[0] ? this.tabPaneList[0].name : 'satisfaction'
  }
}
</script>
<style lang="stylus" scoped>
  .channelConfig
    height 100%
    position relative
</style>
